<template>
	<el-container class="inp-specimen-result">
		<el-main class="inp-specimen-result-main">
			<el-tabs type="border-card">
				<el-tab-pane label="结果预览">
					<div>
						<div class="flex">
							<el-text>项目数：0</el-text>
							<el-text>必录项目数：0</el-text>
							<el-radio-group v-model="showRequired">
								<el-radio :value="0">显示全部</el-radio>
								<el-radio :value="1">显示必录</el-radio>
							</el-radio-group>
							<el-text>项目代码：</el-text>
						</div>
						<MkTable :data="resultData" height="400px">
							<MkColumnIndex />
							<MkColumnExpand :contents="resultExpand" />
							<MkColumn label="项目代码" prop="code" />
							<MkColumn label="项目名称" prop="name" />
							<MkColumn label="结果" prop="result" />
							<MkColumn label="提示" prop="tips" />
							<MkColumn label="参考范围" prop="range" width="100px" />
							<MkColumn label="单位" prop="unit" />

							<!-- <MkColumn label="历史结果1" prop="history1" /> -->
							<!-- <MkColumn label="历史结果2" prop="history2" /> -->
							<!-- <MkColumn label="历史结果3" prop="history3" /> -->
							<!-- <MkColumn label="结束时间" prop="endTime" /> -->
							<!-- <MkColumn label="结果类型" prop="type" /> -->
						</MkTable>
					</div>
				</el-tab-pane>
				<el-tab-pane label="双列预览">
					<div>双列预览</div>
				</el-tab-pane>
				<el-tab-pane label="历史结果">
					<el-tabs>
						<el-tab-pane label="不规则抗体筛查">
							<MkTable height="400px" :data="list1">
								<MkColumnIndex />
								<MkColumn label="标本条码" prop="code" />
								<MkColumn label="检验时间" prop="time" />
								<MkColumn label="不规则抗体筛查Ⅰ" prop="result1" />
								<MkColumn label="不规则抗体筛查Ⅱ" prop="result2" />
								<MkColumn label="不规则抗体筛查Ⅲ" prop="result3" />
								<MkColumn label="备注" prop="result4" />
							</MkTable>
						</el-tab-pane>
						<el-tab-pane label="不规则抗体筛查">
							<MkTable height="400px" :data="list2">
								<MkColumnIndex />
								<MkColumn label="标本条码" prop="code" />
								<MkColumn label="检验时间" prop="time" />
								<MkColumn label="R时间(凝血因子活性)" prop="result1" />
								<MkColumn label="K时间" prop="result2" />
								<MkColumn label="α角[Angle]" prop="result3" />
								<MkColumn label="最大血块强度[MA]" prop="result4" />
								<MkColumn label="LY30纤维蛋白溶解功能[LY30]" prop="result5" />
								<MkColumn label="EPL纤维蛋白溶解功能[EPL]" prop="result6" />
								<MkColumn label="综合凝血指数[CI]" prop="result7" />
								<MkColumn label="A最大振幅[MA-A]" prop="result8" />
								<MkColumn label="AA最大振幅[MA-AA]" prop="result9" />
								<MkColumn label="AA抑制率[AA%]" prop="result10" />
								<MkColumn label="ADP最大振幅[MA(ADP)]" prop="result11" />
								<MkColumn label="ADP抑制率[ADP%]" prop="result12" />
							</MkTable>
						</el-tab-pane>
						<el-tab-pane label="传染病筛查三项">
							<MkTable height="400px" :data="list3">
								<MkColumnIndex />
								<MkColumn label="标本条码" prop="code" />
								<MkColumn label="检验时间" prop="time" />
								<MkColumn label="丙型肝炎抗体检测" prop="result1" />
								<MkColumn label="梅毒螺旋体抗体" prop="result2" />
								<MkColumn label="HIV抗原抗体联合检测(电化学发光)" prop="result3" />
							</MkTable>
						</el-tab-pane>
					</el-tabs>
				</el-tab-pane>
				<el-tab-pane label="图像预览">
					<ImageControl :imageList="imageList"/>
				</el-tab-pane>
			</el-tabs>
		</el-main>
		<el-footer class="inp-specimen-result-footer">
			<div style="display: flex; flex-direction: column; height: 100%">
				<div class="footer-btns">
					<el-button type="primary" size="small">备注评价</el-button>
					<el-button type="primary" size="small">历史评价</el-button>
				</div>
				<div class="textarea">
					<el-input v-model="remark" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
						placeholder="请输入备注" />
				</div>
			</div>
			<el-steps :active="2" class="footer-steps" align-center size="small">
				<el-step title="下载">
					<template #description>
						<div class="step-item">
							<div>2024/11/9 15:44</div>
							<div>admin</div>
						</div>
					</template>
				</el-step>
				<el-step title="采集">
					<template #description>
						<div>
							<div>2024/11/9 15:44</div>
							<div>admin</div>
						</div>
					</template>
				</el-step>
				<el-step title="收取"> </el-step>
				<el-step title="送达"> </el-step>
				<el-step title="签收"> </el-step>
				<el-step title="上机"> </el-step>
				<el-step title="检验"> </el-step>
				<el-step title="报废"> </el-step>
				<el-step title="打印"> </el-step>
			</el-steps>
		</el-footer>
	</el-container>
</template>
<script lang="ts" setup>
import ImageControl from './ImageControl.vue';
const showRequired = ref(1);
const remark = ref('');
const resultExpand = [
	{ label: '历史结果1', prop: 'history1' },
	{ label: '历史结果2', prop: 'history2' },
	{ label: '历史结果3', prop: 'history3' },
	{ label: '结束时间', prop: 'endTime' },
	{ label: '结果类型', prop: 'type' },
]
const list1 = [
	{ code: '1201023', time: '2024-12-01 15:32:01', result1: '+', result2: '-', result3: '+', result4: '' },
	{ code: '1201024', time: '2024-12-01 15:35:25', result1: '-', result2: '-', result3: '+', result4: '' },
	{ code: '1201025', time: '2024-12-01 15:39:17', result1: '+', result2: '-', result3: '+', result4: '' },
	{ code: '1201026', time: '2024-12-01 15:41:53', result1: '+', result2: '+', result3: '+', result4: '' },
	{ code: '1201027', time: '2024-12-01 15:43:49', result1: '+', result2: '-', result3: '+', result4: '' },
];
const list2 = [
	{
		code: '1201028', time: '2024-12-02 13:10:59', result1: '+', result2: '-', result3: '-', result4: '+',result5: '+',
		result6: '+', result7: '-', result8: '+', result9: '+', result10: '-', result11: '-', result12: '+'
	},
];
const list3 = [
	{ code: '1201028', time: '2024-12-02 16:51:10', result1: '+', result2: '-', result3: '+' },
];
import data from './data';
const imageList = ref<any[]>(data);
defineOptions({
	name: 'InpSpecimenResult',
});
/**
 * 列表数据
 */
const resultData = ref<any[]>([]);
/**
 * 获取列表数据
 */
const getResultData = () => {
	for (let i = 0; i < 10; i++) {
		resultData.value.push({
			code: 'code' + Math.floor((Math.random() * 10000) / 7) + i,
			name: '项目' + Math.floor((Math.random() * 10000) / 7),
			result: '结果' + Math.floor((Math.random() * 10000) / 7),
			tips: '提示' + Math.floor((Math.random() * 10000) / 7),
			range: Math.floor((Math.random() * 10000) / 7) + '~' + Math.floor((Math.random() * 10000) / 7 + 10000),
			unit: '单位' + Math.floor((Math.random() * 10000) / 7),
			history1: '历史结果1' + Math.floor((Math.random() * 10000) / 7),
			history2: '历史结果2' + Math.floor((Math.random() * 10000) / 7),
			history3: '历史结果3' + Math.floor((Math.random() * 10000) / 7),
			endTime: '2024-11-' + Math.floor(((Math.random() * 10) % 7) + 1) + ' 15:44',
			type: '结果类型' + Math.floor((Math.random() * 10000) / 7),
		});
	}
};
watch(
	() => showRequired.value,
	() => {
		getResultData();
	}
);
</script>
<style lang="scss" scoped>
.inp-specimen-result {
	.inp-specimen-result-main {
		min-width: 500px;
		overflow-x: auto;
		height: auto;
		padding: 0;
		flex-shrink: 0;

		:deep(.el-tabs) {
			height: 100%;
		}

		:deep(.el-tab-pane) {
			overflow: auto;
			height: 100%;

			&>div {
				// width: 1000px;
			}
		}

		.flex {
			display: flex;

			&>div,
			&>span {
				margin-right: 1rem;
			}
		}
	}

	.inp-specimen-result-footer {
		min-width: 500px;
		overflow-x: auto;
		flex-shrink: 1;
		padding: 10px 0 0;
		height: auto;
		display: flex;
		align-items: center;
		margin-left: 5px;

		.footer-btns {
			display: flex;
			justify-content: space-between;

			button {
				margin-bottom: 0.5rem;
			}
		}

		.textarea {
			height: 100%;

			.el-textarea,
			:deep(.el-textarea__inner) {
				height: 100% !important;
			}
		}

		.footer-steps {
			width: 800px;
			display: flex;
			align-items: flex-start;

			.step-item {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			:deep(.el-step__icon-inner) {
				font-size: 20px !important;
			}
		}
	}
}
</style>
